<template>
    <div class="products__item-img">
        <img v-if="products.banner" :src="products.banner.image_url" alt="" class="products__item-image">
    </div>
    <div class="container">
        <div class="products__item-title">
            <h1 class="cp__title">产品中心</h1>
        </div>
        <div class="products__wrapper">
            <div class="products__items" v-if="products.list" v-for="(product, index) in products.list" :key="index">
                <el-card v-show="screenWidth > 769" style="width: 277px;">
                    <div class="products_card">
                        <div class="products__title">
                            <h3>{{ product.title }}</h3>
                            <p v-html="product.describes"></p>
                            <a target="_self" @click="$router.push('/' + product.code + '?id=' + product.id)"
                                class="cont4-links">了解更多</a>
                        </div>
                    </div>
                </el-card>
                <el-card v-show="screenWidth < 768" style="width: 206px;height: 250px;">
                    <div class="products_card">
                        <div class="products__title">
                            <h3>{{ product.title }}</h3>
                            <p v-html="product.describes"></p>
                            <a target="_self" @click="$router.push('/' + product.code + '?id=' + product.id)"
                                class="cont4-links">了解更多</a>
                        </div>
                    </div>
                </el-card>
                <div class="products__items-line">
                    <img :src="product.display_pictures" class="products__image" />
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
import { onMounted, ref } from 'vue'
import { getProductList } from '@/api/cp/product'

const products = ref([])

// 响应式数据，用于存储屏幕宽度
const screenWidth = ref(window.innerWidth);

// 在组件挂载时获取初始屏幕宽度
onMounted(() => {
    screenWidth.value = window.innerWidth;
});

// 监听屏幕尺寸变化，更新屏幕宽度数据
const updateScreenWidth = () => {
    screenWidth.value = window.innerWidth;
};
window.addEventListener('resize', updateScreenWidth);

onMounted(() => {
    screenWidth.value = window.innerWidth;
    // 获取产品列表
    getProductList().then(res => {
        console.log(res);
        products.value = res.data;
    })
});


</script>

<style lang="scss">
@media screen and (min-width: 1025px) {
    .container {
        background-color: rgb(243, 243, 243);
        padding-bottom: 40px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }

    .products__item-img {
        width: 100%;
        height: auto;
    }

    .products__item-image {
        width: 100%;
        height: auto;
    }

    .products__item-title {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin: 30px auto;
    }

    .cp__title {
        line-height: 1.75;
        font-size: 34px;
    }

    .products__wrapper {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .products__items {
        display: flex;
        margin: 50px 80px;
        align-items: center;
    }

    .products_card {
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .products__title {
        margin-top: 15px;
    }

    .products__title p {
        line-height: 30px;
        font-size: 14px;
    }

    .products__image {
        width: 200px;
        height: 100%;
    }

    .products__items-line {
        height: 277px;
    }

    .cont4-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin: 20px auto;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        line-height: 15px;
    }

    .cont4-links:hover {
        background-color: #409eff;
        color: white;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        background-color: rgb(243, 243, 243);
        padding-bottom: 40px;
    }

    .products__item-img {
        max-width: 100%;
        height: auto;
    }

    .products__item-image {
        max-width: 100%;
        height: auto;
    }

    .products__item-title {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin: 30px auto;
    }

    .cp__title {
        line-height: 1.75;
        font-size: 34px;
    }

    .products__wrapper {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .products__items {
        display: flex;
        margin: 50px auto;
        align-items: center;
    }

    .products_card {
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .products__title {
        margin-top: 15px;
    }

    .products__title p {
        line-height: 30px;
        font-size: 14px;
    }

    .products__image {
        width: 200px;
        height: 100%;
    }

    .products__items-line {
        max-width: 100%;
        height: auto;
    }

    .cont4-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin: 20px auto;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        line-height: 15px;
    }

    .cont4-links:hover {
        background-color: #409eff;
        color: white;
    }
}

@media screen and (max-width: 768px) {
    .container {
        background-color: rgb(243, 243, 243);
        padding-bottom: 40px;
    }

    .products__item-img {
        max-width: 100%;
        height: auto;
    }

    .products__item-image {
        max-width: 100%;
        height: auto;
    }

    .products__item-title {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .cp__title {
        line-height: 1.75;
        font-size: 34px;
    }

    .products__wrapper {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .products__items {
        display: flex;
        margin: 50px 0px;
        align-items: center;
        padding: 0 20px;
    }

    .products_card {
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .products__title {
        margin-top: 15px;
    }

    .products__title p {
        line-height: 30px;
        font-size: 14px;
    }

    .products__image {
        max-width: 100%;
        height: auto;
    }

    .products__items-line {
        height: 277px;
    }

    .cont4-links {
        width: 107px;
        height: 29px;
        line-height: 29px;
        display: block;
        margin: 0;
        padding: 0;
        border-top: 2px solid #999999;
        border-right: 2px solid #999999;
        border-bottom: 2px solid #999999;
        border-left: 2px solid #999999;
        border-radius: 0;
        background-color: transparent;
        background-image: none;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
        background: linear-gradient(none, none);
        box-shadow: 0 0 0 transparent;
        text-align: center;
        text-decoration: none;
        outline: none;
        vertical-align: middle;
        position: relative;
        z-index: 1;
        transition: all 300ms ease-in-out;
    }

    .cont4-links:hover {
        background-color: #409eff;
        color: white;
    }
}
</style>